<template>
  <div>
    <el-upload
      v-if="!imageUrl"
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- 显示默认图片 -->
    <div v-else>
      <img @click="openShow" :src="imageUrl" class="avatar" />
      <i class="el-icon-close"></i>
    </div>
    <!-- 进度条 -->
    <el-progress
      v-if="showProgress"
      class="myprogress"
      :show-text="false"
      :percentage="percentage"
    ></el-progress>
    <!-- 显示一个预览框 -->
    <el-dialog title="预览头像" :visible.sync="show"></el-dialog>
    <img :src="imageUrl" />
    <dialog></dialog>
  </div>
</template>

<script>
// 导入腾讯云组件
import COS from "cos-js-sdk-v5";
export default {
  name: "imageUpload",
  data() {
    return {
      // 当前上传的图片 路径
      imageUrl: "",
      props: ["imageUrl"],
      // 预览面板的显示
      show: false,
      // 进度条的显示
      percentage: 0,
      // 上传图片进度条才显示
      showProgress: false
    };
  },
  methods: {
    // 自定义功能 将图片上传到腾讯云中
    httpRquest(content) {
      // 显示进度条
      this.showProgress = true;
      // 得到上传文件
      const file = content.file;
      this.cosObj.putObject(
        {
          Bucket: "rz74-1307667037" /* 必须 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象;
            // console.log(JSON.stringify(progressData));
            // 实时修改进度条的值
            this.percentage = percentageData.percent * 100;
          }
        },
        (err, data) => {
          // data: 上传成功后的返回值;
          // err: 上传出错的错误信息;
          // console.log(err || data);
          // 进度条给个延时
          setTimeout(() => {
            // 隐藏进度条
            this.showProgress = false;
            // 将返回的图片地址保存起来 imageUrl
            this.$emit("update:imageUrl", `https://${data.location}`);
          }, 800);
        }
      );
    },
    // 打开预览框
    openShow() {
      this.show = true;
    },
    // 上传之前会出发的回调函数
    beforeAvatarUpload(file) {
      console.log(file);
      // 判断图片类型
      const isType = file.type === "image/jpeg" || file.type === "image/png";
      // 判断图片大小
      const isLess2M = file.size / 1024 / 1024 < 2;
      if (!isType) {
        // 提示信息
        this.$message({
          type: "error",
          message: "图片格式只能是 png 或 jpeg"
        });
      }
      if (!isLess2M) {
        this.$message({
          type: "error",
          message: "图片大小不能超过 2 M"
        });
      }
      return isType && isLess2M;
    }
  },
  created() {
    // 初始化 cosObj
    this.cosObj = new COS({
      SecretId: "AKID61g4B1g4B1ZroY1ECtJTMyJNBixvd4E7",
      SecretKey: "f3A0Zrte8MJzOXP0KNAhz1nIWS8XeU3M"
    });
  }
};
</script>

<style lang="scss">
.myprogress {
  width: 178px;
}
</style>
